.page {
  .ml-5 {
    margin-left: 10rpx;
  }

  .mt-17 {
    margin-top: 34rpx;
  }

  .ml-11 {
    margin-left: 22rpx;
  }

  .display-flex {
    display: flex
  }

  ;

  .mr-auto {
    margin-right: auto !important;
  }

  &.page {
    background-color: #f8f8f8;
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    .section {
      padding: 24rpx 28rpx 100rpx 28rpx;
      // border: 1rpx solid red;

      // background-image: linear-gradient(171.1deg, #1c2c60 0%, #1d2f65 -14.46%, #adb4c9 46.78%, #ea602d00 100%);

      .schedule-detail-container {
        background-color: #ffffff;
        border-radius: 16rpx;
        padding: 24rpx;
        box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);

        // 顶部图片区域
        .header-image {
          position: relative;
          height: 380rpx;

          .stadium-image {
            width: 100%;
            height: 100%;
            border-radius: 16rpx;
          }

          // 搜索框容器
          .search-container {
            position: absolute;
            top: 57rpx;
            left: 45%;
            transform: translate(-50%, -50%);
            width: 80%;
            z-index: 10;
          }

          .search-box {
            display: flex;
            align-items: center;
            background: transparent;
            border-radius: 50rpx;
            padding: 16rpx 24rpx;
            box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
            -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(10rpx);
            border: 1px solid rgba(0, 0, 0, 0.15);
          }

          .search-icon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 16rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .search-input {
            flex: 1;
            font-size: 28rpx;
            color: #333;
            background: transparent;
            border: none;
            outline: none;
            padding: 0;

            &::placeholder {
              color: #999;
            }
          }

          .clear-btn {
            width: 40rpx;
            height: 40rpx;
            background: #f0f0f0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 16rpx;
            cursor: pointer;
            transition: all 0.3s ease;

            &:active {
              background: #e0e0e0;
              transform: scale(0.95);
            }

            .clear-text {
              font-size: 24rpx;
              color: #666;
              line-height: 1;
            }
          }

          .share-btn {
            position: absolute;
            top: 24rpx;
            right: 24rpx;
            width: 64rpx;
            height: 64rpx;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

            .share-icon {
              width: 36rpx;
              height: 36rpx;
            }
          }
        }

        // 标题
        .schedule-title {
          padding: 24rpx 4rpx 8rpx;

          .title-text {
            font-size: 36rpx;
            font-weight: 700;
            color: #1d2129;
          }
        }

        // 列表
        .schedule-list {

          /* Adapt to uv-collapse structure */
          :deep(.uv-collapse-item) {
            margin-top: 20rpx;
            border-radius: 16rpx;
            background: #ffffff;
            box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
            overflow: hidden;
          }

          :deep(.uv-collapse-item__title) {
            padding: 20rpx 24rpx;
            font-size: 28rpx;
            color: #1d2129;
          }

          :deep(.uv-collapse-item__content) {
            padding: 0;
            /* we control spacing inside */
            background: transparent;
          }

          // 展开内容
          .participants-grid {
            background: #f7f9ff;
            border-radius: 16rpx;
            padding: 16rpx 20rpx 20rpx;
            border: 1rpx solid #eef1ff;
            margin: 0 16rpx 16rpx;

            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20rpx;

            .participant-item {
              position: relative;
              display: flex;
              flex-direction: column;
              align-items: center;
              background: #ffffff;
              border: 1rpx solid #f0f0f0;
              border-radius: 12rpx;
              padding: 16rpx 10rpx 12rpx;

              .participant-avatar {
                width: 70rpx;
                height: 92rpx;
                border-radius: 50%;
                background: #f2f3f5;
                margin-bottom: 12rpx;
              }

              // 序号气泡置顶左
              .sequence-number {
                position: absolute;
                font-size: 15rpx;
                padding: 4rpx 10rpx;
                border-radius: 999rpx;
                top: 42%;
                left: 18%;
                background: rgba(148, 151, 157, 0.2);
                color: #fff;
              }

              .participant-name {
                font-size: 24rpx;
                color: #333333;
                text-align: center;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }

        // 底部提示
        .footer-tip {
          text-align: center;
          padding: 36rpx 0 24rpx;

          .tip-text {
            font-size: 26rpx;
            color: #9aa1a9;
          }
        }
      }
    }

    .movable-area {
      position: fixed;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 100;
    }

    .fab-container {
      pointer-events: auto;
      width: 100rpx;
      height: 100rpx;
      background-color: transparent;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
    }

    .fab-icon {
      width: 100%;
      height: 100%;
    }

    .text-wrapper {
      width: 90%;
      height: 90rpx;
      background-color: #1D428A;
      box-shadow: 0rpx 0rpx 18rpx 0rpx #ee73500a;
      border-radius: 22rpx;
      border: unset !important;
      // position: absolute;
      // bottom: 90rpx;
      // left: 50%;
      // transform: translate(-50%, 0);

      &::after {
        border: unset !important;
      }

      .text {
        color: #fff;
        font-size: 30rpx;
        font-family: 'PingFang SC';
        line-height: 90rpx;
      }
    }
  }
}